import React, { Component, Fragment } from "react";
// antd
import { Dropdown, Menu, Table, Button, Col, Pagination, Form, Input, Select, Typography, Space, Tag, notification, Modal, Drawer, message, Switch, Divider,Checkbox, Popover, InputNumber, Tooltip } from "antd";
import Action from "@c/buttonAction/Index";
import { SmileOutlined, LineChartOutlined, DownOutlined, CopyOutlined, CheckOutlined } from '@ant-design/icons';
// http
import http from '../../../utils/request';

// ansi
import Ansi from "ansi-to-react";
import {CopyToClipboard} from 'react-copy-to-clipboard';

// 维护数据
import { maintain_date } from "../../../utils/common";

// import XLSX from "xlsx"
import ExportJsonExcel from "js-export-excel";
import { cmdb_sheet_filter, cmdb_sheet_header, cmdb_sheet_name, pagination_size_option } from "../../../utils/common"


const { TextArea } = Input;
const { Text, Link } = Typography;
const { Option } = Select;

const columnsCms = [
    {
        title: 'USER',
        dataIndex: 'user',
        key: 'puserid',
    },
    {
        title: 'PID',
        dataIndex: 'pid',
        key: 'pid',
    },
    {
        title: 'NAME',
        dataIndex: 'name',
        key: 'name',
        render: text => <Link>{text}</Link>,
    },
    {
        title: 'CPU',
        dataIndex: 'cpu',
        key: 'cpu',
        sorter: (a, b) => a.cpu - b.cpu,
    },
    {
        title: 'MEM',
        dataIndex: 'memory',
        key: 'memory',
        sorter: (a, b) => a.memory - b.memory,
    },
    {
        title: 'FILE',
        dataIndex: 'file',
        key: 'file',
        sorter: (a, b) => a.file - b.file,        
    },
    {
        title: 'CMD',
        dataIndex: 'args',
        key: 'args',
    },
  ];
  
class Host extends Component {
    constructor(props){
        super(props)
        this.state = {
            loading: false,
            loading_ansible: false,
            loading_label: false,
            loading_sync_policy: false,
            // 分页
            total: '',
            page: 1,
            page_number: 10,

            // 搜索
            search_instance_region: null,
            search_instance_platform: null,
            search_instance_account_name: null,
            search_instance_resource_type: null,
            search_charge_type: null,
            search_common: null,
            search_option_account: [],
            search_option_platform: [],
            search_option_region: [],
            search_business: null,
            search_division: null,
            search_alarm_status: null,
            search_jumpserver_status: null,

            selectedRowKeys: [],
            ansible_host_list: '',
            ansible_list_option: [],
            label_host_list: '',

            // 业务线标签
            label_list_option: '',
            label_list_option_name: '',

            // 事业部标签
            label_division_list_option: '',
            label_division_list_option_name: '',

            // 水位线标签
            label_waterline_list_option: '',
            label_waterline_list_option_name: '',

            visible_ansible: false,
            visible_drawer: false,
            visable_label: false,
            visable_label_division: false,
            visable_label_waterline: false,
            visable_cms: false,
            visible_edit: false,
            visable_maintain: false,
            visable_maintain_single: false,
            visible_sync: false,
            visible_sync_policy: false, // jumpserver同步策略
            jumpserver_status: null,    // jumpserver状态

            socket: '',
            socket_ansible_info: '',
            dataSourceCms: [],
            contentHeight: null,

            metric_instance_id: null,
            metric_list: [],
            metric_list_column: [],
            metric_list_select: [],
            maintain_key: [],

            // 表格
            dataSource: [],
            columns: [
                {title: "实例ID/名称", dataIndex: "instance_id", key: "instance_id",
                    render: (text, rowData) => {
                        return(
                            <Space direction="vertical">
                                <CopyToClipboard text={rowData.instance_id} 
                                    onCopy={() => 
                                        this.setState({copied: true},
                                        notification.open({
                                            message: '已复制到剪贴板',
                                            icon: <CheckOutlined style={{ color: 'green' }} />,
                                            duration: 2,
                                            placement: 'top',
                                        })
                                    )}
                                >
                                    <span><span style={{marginRight: "5px"}}><CopyOutlined /></span><span style={{color: "#6587FF"}}>{rowData.instance_id}</span></span>
                                </CopyToClipboard>
                                 
                                <Text >{rowData.name}</Text>
                            </Space>
                        )
                    }
                },
                {title: "云平台", dataIndex: "cloud-platform", key: "cloud-platform",
                    render: (text, rowData) => {
                        return(
                            <div>
                                <Tag color="green">{rowData.platform}-{rowData.account_name}</Tag>
                            </div>
                        )
                    }
                },
                {title: "区域", dataIndex: "region", key: "region",
                    render: (text, rowData) => {
                        return(
                            <div>
                                <Tag color="green">{rowData.region}</Tag>
                            </div>
                        )
                    }
                },
                {title: "财务", dataIndex: "division", key: "division", width: "160px",
                    render: (text, rowData) => {
                        return(
                            <div>
                                <Tag color="green">{rowData.division}</Tag>
                            </div>
                        )
                    }
                },
                {title: "告警", dataIndex: "business", key: "business", width: "160px",
                    render: (text, rowData) => {
                        return(
                            <div>
                                <Tag color="green">{rowData.business}</Tag>
                            </div>
                        )
                    }
                },
                {title: "类型", dataIndex: "resource_type", key: "resource_type",
                    render: (text, rowData) => {
                        return(
                            <div>                 
                                <Tooltip title={rowData.resource_type_name}>
                                    <Tag color="gold">{rowData.resource_type}</Tag>
                                </Tooltip>
                            </div>
                        )
                    }
                },
                {title: "水位", dataIndex: "waterline", key: "waterline", ellipsis: {showTitle: false,},
                render: (text, rowData) => {
                        return(
                            <Tooltip title={rowData.waterline_name}>
                                <span>{rowData.waterline}</span>
                            </Tooltip>
                        )
                    }
                },
                {title: "地址", dataIndex: "address", key: "address",
                    render: (text, rowData) => {
                        const private_ip = <div>{rowData.private_ip.length > 0 ? "私: " + rowData.private_ip : null}</div>
                        const public_ip = <div>{rowData.public_ip.length > 0 ? "公: " + rowData.public_ip : null}</div>
                        const eip = <div>{rowData.eip ? "弹: " + rowData.eip : null}</div>
                        const vpn_ip = <div>{rowData.vpn_ip ? "虚: " + rowData.vpn_ip : null}</div>
                        return(
                            <div>
                                {private_ip}
                                {public_ip}
                                {eip}
                                {vpn_ip}
                            </div>
                        )
                    }
                },
                {title: "过期时间", dataIndex: "expire_time", key: "expire_time"},
                {title: "付费类型", dataIndex: "charge_type", key: "charge_type",
                    render: (text, rowData) => {
                        return(
                            <div>
                                <Tag color="magenta">{rowData.charge_type}</Tag>
                            </div>
                        )
                    }
                },
                {title: "实例规格", dataIndex: "instance_type", key: "instance_type",
                    render: (text, rowData) => {
                        const cpu = rowData.cpu ? <span>{rowData.cpu}C</span> : null
                        const memory = rowData.memory ? <span>{rowData.memory}M</span> : null
                        return(
                            <div>
                                <div>{rowData.instance_type}</div>
                                <div>{cpu} {memory}</div>
                            </div>
                        )
                    }
                },
                {title: "实例版本", dataIndex: "os", key: "os",
                    render: (text, rowData) => {
                        return(
                            <div>{rowData.os}</div>
                        )
                    }
                },
                {title: "接警", dataIndex: "alarm_status", key: "alarm_status",
                    render: (text, rowData) => {
                        return (
                            <Switch 
                                size="small" 
                                defaultChecked={rowData.alarm_status} 
                                onClick={() => this.onChangeAlarmStatus(rowData.id)} 
                            />
                        )
                    }
                },
                {title: "堡垒机", dataIndex: "jumpserver_status", key: "jumpserver_status",
                    render: (text, rowData) => {
                        var display = null
                        if (rowData.jumpserver_status === '1'){
                            display = '内网'
                        } else if (rowData.jumpserver_status === '0') {
                            display = '公网'
                        } else if (rowData.jumpserver_status === '2'){
                            display = '禁用'
                        } else {
                            display = <Tag>未知</Tag>
                        }
                        return (
                            <div>{display}</div>
                        )
                    }
                },
                {title: "操作", dataIndex: "operation", key: "operation", fixed: 'right', 
                    render: (text, rowData) => {
                        const menu = (
                            <Menu
                                items={[
                                    {
                                        label: (
                                        <Action.Button onClick={() => this.onEditHostBtn(rowData)}>编辑</Action.Button>
                                        ),
                                        key: '0',
                                    },
                                    {
                                        label: (
                                            <Action.Button onClick={() => this.onCmsAgentProcessesBtn(rowData.instance_id)}>监控</Action.Button>
                                        ),
                                        key: '1',
                                    },
                                    {
                                        label: (
                                            <Action.Button onClick={() => this.onEditSyncPolicyBtn(rowData)}>同步策略</Action.Button>
                                        ),
                                        key: '2',
                                    },
                                    {
                                        label: (
                                            <Action.Button onClick={() => this.onAlarmMaintainBtn(rowData)}>维护（长期）</Action.Button>
                                        ),
                                        key: '3',
                                    },
                                    {
                                        label: (
                                            <Action.Button onClick={() => this.onAlarmMaintainSingleBtn(rowData)}>维护（单次）</Action.Button>
                                        ),
                                        key: '4',
                                    },                                    
                                ]}
                            />
                        );
                        return (
                            <div className="inline-button">
                                <Action>
                                    <Link target="_blank" href={`http://grafana1.raycloud.com/d/${rowData.resource_type === 'host' ? 'rVbcp2nnz/ecsjian-kong' : 'GgIP4awWz/slb-jian-kong'}?orgId=1&var-account=${rowData.account_name}&var-name=${rowData.name}&var-ip=${rowData.private_ip}`}>
                                        <LineChartOutlined/>
                                    </Link>
                                    <Action.Button onClick={() => this.onEditRenewalPriceBtn(rowData.instance_id)}>询价</Action.Button>
                                </Action>
                                <Dropdown overlay={menu}>
                                    <Action.Button>
                                        <Space>
                                            更多
                                            <DownOutlined />
                                        </Space>
                                    </Action.Button>
                                </Dropdown>
                            </div>
                        )
                    }           
                }
            ],
            demoList: [ '?'],
        }
        this.formRefAnsible = React.createRef();
        this.formRefLabel = React.createRef();
        this.formRefLabelDivision = React.createRef();
        this.formRefLabelWaterline = React.createRef();
        this.formRefEdit = React.createRef();
        this.formRefMaintain = React.createRef();
        this.formRefAdd = React.createRef();
        this.formRefEditSyncPolicy = React.createRef();
    }

    componentDidMount() {
        this.loadData()
        this.loadDataPlatform()
        this.loadDataBusiness()
        this.loadDataDivision()
        this.loadDataWaterline()
        this.loadDataPush()
    }

    loadDataPush = () => {
        const maintain_key = []
        for(var key in maintain_date) {
            if (key.length < 2){
                maintain_key.push(0+key)
            } else {
                maintain_key.push(key)
            }
        }
        this.setState({
            maintain_key: maintain_key
        })
    }

    loadDataPlatform = () => {
        const requestData = {
            'page': 1,
            'limit': 1000,
        }
        http.get('/cloud/platform', {params: requestData}).then(response=>{
            const search_option_platform = []
            const resp_data = response.data.data.items
            for (let i = 0; i < resp_data.length; i++) {
                search_option_platform.push(<Option key={resp_data[i].name}>{resp_data[i].name}</Option>)
            }
            this.setState({
                search_option_platform: search_option_platform
            })
        })
    }

    loadDataBusiness = () => {
        const requestDataBusiness = {
            'page': 1,
            'limit': 1000,
        }
        http.get('/business', {params: requestDataBusiness}).then(response=>{
            const resp_data = response.data.data.items
            const label_list_option = []
            const label_list_option_name = []
            for (let i = 0; i < resp_data.length; i++) {
                label_list_option.push(<Option key={resp_data[i].id}>{resp_data[i].name}</Option>)
                label_list_option_name.push(<Option key={resp_data[i].name}>{resp_data[i].name}</Option>)

            }
            label_list_option_name.push(<Option key='none'>空标签</Option>)
            this.setState({
                label_list_option: label_list_option,
                label_list_option_name: label_list_option_name
            })
        })
    }

    loadDataDivision = () => {
        const requestDataBusiness = {
            'page': 1,
            'limit': 1000,
        }
        http.get('/division', {params: requestDataBusiness}).then(response=>{
            const resp_data = response.data.data.items
            const label_division_list_option = []
            const label_division_list_option_name = []
            for (let i = 0; i < resp_data.length; i++) {
                label_division_list_option.push(<Option key={resp_data[i].id}>{resp_data[i].name}</Option>)
                label_division_list_option_name.push(<Option key={resp_data[i].name}>{resp_data[i].name}</Option>)

            }
            label_division_list_option_name.push(<Option key='none'>空标签</Option>)

            this.setState({
                label_division_list_option: label_division_list_option,
                label_division_list_option_name: label_division_list_option_name
            })
        })
    }

    loadDataWaterline = () => {
        const requestDataBusiness = {
            'page': 1,
            'limit': 1000,
        }
        http.get('/waterline', {params: requestDataBusiness}).then(response=>{
            const resp_data = response.data.data.items
            const label_waterline_list_option = []
            const label_waterline_list_option_name = []
            for (let i = 0; i < resp_data.length; i++) {
                label_waterline_list_option.push(<Option key={resp_data[i].id}>{resp_data[i].label} ({resp_data[i].tag_code})</Option>)
                label_waterline_list_option_name.push(<Option key={resp_data[i].label}>{resp_data[i].label}</Option>)

            }
            label_waterline_list_option_name.push(<Option key='none'>空标签</Option>)

            this.setState({
                label_waterline_list_option: label_waterline_list_option,
                label_waterline_list_option_name: label_waterline_list_option_name
            })
        })
    }

    loadData = () => {
        this.setState({
            loading: true
        })
        const requestData = {
            'page': this.state.page,
            'limit': this.state.page_number,
            'search_common__contains': this.state.search_common,
            'business': this.state.search_business,
            'division': this.state.search_division,
            'waterline': this.state.search_waterline,
            'platform': this.state.search_instance_platform,
            'account_name': this.state.search_instance_account_name,
            'region': this.state.search_instance_region,
            'resource_type': this.state.search_instance_resource_type,
            'alarm_status': this.state.search_alarm_status,
            'jumpserver_status': this.state.search_jumpserver_status,
            'charge_type': this.state.search_charge_type,
        }
        console.log(requestData)
        // 获取database列表
        http.get('/cloud/host', {params: requestData}).then(response=>{
            this.setState({
                dataSource: response.data.data.items,
                total: response.data.data.pages.total,
                loading: false
            })
        }).catch()
    }

    // 切换每页数量
    onChangeSizePage = (page, page_number) => {
        this.setState({
            page: page,
            page_number: page_number,
        }, () => {
            this.loadData()
        })
        // this.loadData()
    }    

    /** 搜索 */
    onFinishSearch = (data) => {
        this.setState({
            search_common: data.search_common,
            search_business: data.search_business,
            search_division: data.search_division,
            search_waterline: data.search_waterline,
            search_instance_platform: data.platform,
            search_instance_account_name: data.account_name,
            search_instance_region: data.region,
            search_instance_resource_type: data.resource_type,
            search_alarm_status: data.alarm_status ? data.alarm_status : null,
            search_jumpserver_status: data.jumpserver_status ? data.jumpserver_status: null,
            search_charge_type: data.charge_type ? data.charge_type : null,
            page: 1
        })
        this.loadData()
    }

    // 询价
    onEditRenewalPriceBtn = (value) => {
        this.setState({
            loading: true
        })
        const requestData = {
            operation_type: 'renewal_price'
        }

        http.patch('/cloud/host/' + value, {params: requestData}).then(response=>{
            const resp_data = response.data
            notification.open({
                message: '询价查询结果',
                description: '单月价格: ¥ ' + resp_data.price_month + '     三年价格: ¥ ' + resp_data.price_year,
                icon: <SmileOutlined style={{ color: '#108ee9' }} />,
              });
            this.setState({
                loading: false
            })
        })
    }

    // 监控
    onCmsAgentProcessesBtn = (value) => {
        this.setState({
            loading: true,
        })
        const requestData = {
            operation_type: 'cms_agent_processes'
        }
        http.patch('/cloud/host/' + value, {params: requestData}).then(response=>{
            this.setState({
                loading: false,
                dataSourceCms: response.data.data,
                visable_cms: true,
            })
        })
    }

    /** 编辑资产  */ 
    onEditHostBtn = (data) => {
        this.onChangePlatform(data.platform)
        // 获取database列表
        http.get('/cloud/host').then(response=>{
            this.formRefEdit.current.setFieldsValue({
                id: data.id,
                instance_id: data.instance_id,
                name: data.name,
                private_ip: data.private_ip,
                public_ip: data.public_ip,
                eip: data.eip,
                vpn_ip: data.vpn_ip,
                charge_type: data.charge_type,
                cpu: data.cpu,
                memory: data.memory,
                create_time: data.create_time,
                expire_time: data.expire_time,
                resource_type: data.resource_type,
                region: data.region,
                platform: data.platform,
                account_name: data.account_name,
                division: data.division,
                business: data.business,
                os_type: data.os_type,
            })
        }).catch()
        this.setState({
            visible_edit: true,
        })
    }

    /** 编辑资产取消 */
    onFinishEditCancel = () => {
        this.setState({
            visible_edit: false,
        })
        this.formRefEdit.current.resetFields();
    }

    /** 编辑资产提交 */
    onFinishEdit = (data) => {
        const requestData = {
            id: data.instance_id,
            name: data.name,
            private_ip: data.private_ip,
            public_ip: data.public_ip,
            vpn_ip: data.vpn_ip,
            eip: data.eip,
            cpu: data.cpu,
            memory: data.memory,
            resource_type: data.resource_type,
            charge_type: data.charge_type,
            create_time: data.create_time,
            expire_time: data.expire_time,
            platform: data.platform,
            account_name: data.account_name,
            region: data.region,
            business: data.business,
            division: data.division,
            os_type: data.os_type,
        }
        http.put('/cloud/host/' + data.instance_id, requestData).then(response=>{
            message.success(response.data.msg)
            this.setState({
                visible_edit: false,
                page: 1,
            })
            this.formRefEdit.current.resetFields();
            this.loadData()
        }).catch()
    }

    // 搜索切换云平台
    onChangePlatform = (value) => {
        if (value) {
            this.setState({
                search_instance_platform: value
            })

            const requestData = {
                'page': 1,
                'limit': 1000,
                'platform': value
            }
    
            http.get('/cloud/account', {params: requestData}).then(response=>{
                const search_option_account = []
                const resp_data = response.data.data.items
                for (let i = 0; i < resp_data.length; i++) {
                    search_option_account.push(<Option key={resp_data[i].name}>{resp_data[i].name}</Option>)
                }
                this.setState({
                    search_option_account: search_option_account
                })
            })
    
            http.get('/cloud/region', {params: requestData}).then(response=>{
                const search_option_region = []
                const resp_data = response.data.data.items
                for (let i = 0; i < resp_data.length; i++) {
                    search_option_region.push(<Option key={resp_data[i].code}>{resp_data[i].name}</Option>)
                }
                this.setState({
                    search_option_region: search_option_region
                })           
            })

        } else {
            this.setState({
                search_option_account: '',
                search_option_region: '',
            })
        }
    }

    // 搜索切换云区域
    onChangeRegion = (value) => {
        this.setState({
            search_instance_region: value ? value : null
        })
    }

    // 搜索云账户
    onChangeAccountName = (value) => {
        this.setState({
            search_instance_account_name: value ? value : null
        })
    }

    // 搜索业务线
    onChangeBusiness = (value) => {
        this.setState({
            search_business: value ? value : null
        })
    }

    // 搜索事业部
    onChangeDivision= (value) => {
        this.setState({
            search_division: value ? value : null
        })
    }

    // 搜索水位线
    onChangeWaterline = (value) => {
        this.setState({
            search_waterline: value ? value : null
        })
    }

    // 批量选中标签
    onSelectChange = (selectedRowKeys) => {
        this.setState({
            selectedRowKeys: selectedRowKeys
        })
    }

    // 批量打标签按钮
    onLabelBtn = () => {
        if (this.state.selectedRowKeys.length>0) {

            // 获取主机列表
            const requestData = {
                instance_id_list: this.state.selectedRowKeys,
                operation_type: 'get_host_list',
            }
            http.patch('/cloud/host', {params: requestData}).then(response=>{
                const resp_data = response.data.data
                const resp_data_2 = resp_data.join("\n")
                this.setState({
                    label_host_list: resp_data_2
                })

                this.formRefLabel.current.setFieldsValue({
                    label_host_list:  resp_data_2
                })
            }).catch()

            this.setState({
                visable_label: true,
            })
        } else {
            message.info('请先选中需要打标签的资源实例')
        }
    }

    // 批量打事业部标签
    onLabelDivisionBtn = () => {
        if (this.state.selectedRowKeys.length>0) {

            // 获取主机列表
            const requestData = {
                instance_id_list: this.state.selectedRowKeys,
                operation_type: 'get_host_list',
            }
            http.patch('/cloud/host', {params: requestData}).then(response=>{
                const resp_data = response.data.data
                const resp_data_2 = resp_data.join("\n")
                this.setState({
                    label_host_list: resp_data_2
                })

                this.formRefLabelDivision.current.setFieldsValue({
                    label_host_list:  resp_data_2
                })
            }).catch()

            this.setState({
                visable_label_division: true,
            })
        } else {
            message.info('请先选中需要打标签的资源实例')
        }
    }

    // 批量打水位线标签
    onLabelWaterlineBtn = () => {
        if (this.state.selectedRowKeys.length>0) {

            // 获取主机列表
            const requestData = {
                instance_id_list: this.state.selectedRowKeys,
                operation_type: 'get_host_list',
            }
            http.patch('/cloud/host', {params: requestData}).then(response=>{
                const resp_data = response.data.data
                const resp_data_2 = resp_data.join("\n")
                this.setState({
                    label_host_list: resp_data_2
                })

                this.formRefLabelWaterline.current.setFieldsValue({
                    label_host_list:  resp_data_2
                })
            }).catch()

            this.setState({
                visable_label_waterline: true,
            })
        } else {
            message.info('请先选中需要打标签的资源实例')
        }
    }

    // 执行ansible任务按钮
    onRunAnsibleTaskBtn = () => {
        if (this.state.selectedRowKeys.length>0) {

            // 获取主机列表
            const requestData = {
                instance_id_list: this.state.selectedRowKeys,
                operation_type: 'get_host_list',
            }
            http.patch('/cloud/host', {params: requestData}).then(response=>{
                const resp_data = response.data.data
                const resp_data_2 = resp_data.join("\n")
                this.setState({
                    ansible_host_list: resp_data_2
                })

                this.formRefAnsible.current.setFieldsValue({
                    ansible_host_list:  resp_data_2
                })
            }).catch()

            // 获取Ansible任务列表
            const requestData_ansible = {
                'page': 1,
                'limit': 1000,
            }
            http.get('/ansible/task', {params: requestData_ansible}).then(response=> {
                const resp_data = response.data.data.items
                const ansible_list_option = []
                for (let i = 0; i < resp_data.length; i++) {
                    ansible_list_option.push(<Option key={resp_data[i].id}>{resp_data[i].name}</Option>)
                }
                this.setState({
                    ansible_list_option: ansible_list_option
                })
            })

            this.setState({
                visible_ansible: true
            })
        } else {
            message.info('请先选中执行ansible任务的主机')
        }
    }

    // 批量打标签任务提交
    onFinishLabel = (data) => {
        this.formRefLabel.current.resetFields()
        this.setState({
            loading_label: true
        })
        const requestData = {
            business_id: data.business_id,
            label_host_list: data.label_host_list,
            operation_type: 'change_label',
        }
        http.patch('/cloud/host', {params: requestData}).then(response=>{
            message.success(response.data.msg)
            this.setState({
                loading_label: false,
                visable_label: false,
                selectedRowKeys: [],
            })
            this.loadData()
        })
    }

    // 批量打事业部标签任务提交
    onFinishLabelDivision = (data) => {
        this.formRefLabelDivision.current.resetFields()
        this.setState({
            loading_label: true
        })
        const requestData = {
            division_id: data.division_id,
            label_host_list: data.label_host_list,
            operation_type: 'change_label_division',
        }
        http.patch('/cloud/host', {params: requestData}).then(response=>{
            message.success(response.data.msg)
            this.setState({
                loading_label: false,
                visable_label_division: false,
                selectedRowKeys: [],
            })
            this.loadData()
        })
    }

    // 批量打水位线标签任务提交
    onFinishLabelWaterline = (data) => {
        this.formRefLabelWaterline.current.resetFields()
        this.setState({
            loading_label: true
        })
        const requestData = {
            waterline_id: data.waterline_id,
            label_host_list: data.label_host_list,
            operation_type: 'change_label_waterline',
        }
        http.patch('/cloud/host', {params: requestData}).then(response=>{
            message.success(response.data.msg)
            this.setState({
                loading_label: false,
                visable_label_waterline: false,
                selectedRowKeys: [],
            })
            this.loadData()
        })
    }

    // ansible任务提交
    onFinishAnsible = (data) => {
        this.setState({
            loading_ansible: false,
            visible_ansible: false
        })
        this.formRefAnsible.current.resetFields()

        const requestData = {
            'ansible_host_list': data.ansible_host_list,
            'ansible_task_list': data.ansible_task_list,
        }

        // const socket = new WebSocket('ws://192.168.85.223:7000/ws/ansible/task')
        const socket = new WebSocket('ws://39.98.199.34:7000/ws/ansible/task')

        socket.addEventListener("open", function(event) {
            socket.send(JSON.stringify(requestData))
        })

        // Listen for messages
        socket.addEventListener('message', (event) => {
            const resp_data = event.data.split('$')
            const socket_ansible_info = []

            for(let i = 0; i<resp_data.length; i++) {
                socket_ansible_info.push(
                    <p><Ansi >{resp_data[i]}</Ansi></p>
                )
            }
            this.setState({
                socket_ansible_info: socket_ansible_info,
                visible_drawer: true,
                selectedRowKeys: [],
            })
        });

        socket.addEventListener("close", (event) => {
            socket.removeEventListener("message")
            socket.close()
        })
    }

    // 批量打标签任务取消
    onFinishLabelCancel = () => {
        this.formRefLabel.current.resetFields()
        this.setState({
            visable_label: false,
            selectedRowKeys: [],
        })
    }

    // 批量打事业部标签任务取消
    onFinishLabelDivisionCancel = () => {
        this.formRefLabelDivision.current.resetFields()
        this.setState({
            visable_label_division: false,
            selectedRowKeys: [],
        })
    }

    // 批量打水位线标签任务取消
    onFinishLabelWaterlineCancel = () => {
        this.formRefLabelWaterline.current.resetFields()
        this.setState({
            visable_label_waterline: false,
            selectedRowKeys: [],
        })
    }

    // ansible任务取消
    onFinishAnsibleCancel = () => {
        this.formRefAnsible.current.resetFields()
        this.setState({
            visible_ansible: false,
            selectedRowKeys: [],
        })
    }

    // 进程监控取消
    onFinishCmsCancel = () => {
        this.setState({
            visable_cms: false,
        })
    }

    // 同步资产
    onSyncHostBtn = () => {
        this.setState({
            visible_sync: true
        })
    }

    /** 同步资产取消 */
    onFinishSyncHostCancel = () => {
        this.setState({
            visible_sync: false,
            selectedRowKeys: []
        })
    }

    /** 同步资产提交 */
    onFinishSyncHost = () => {
        this.setState({
            loading: true,
            visible_sync: false
        })
        const requestData = {
            instance_id_list: this.state.selectedRowKeys,
            operation_type: 'sync_jumpserver',
        }
        http.patch('/cloud/host', {params: requestData}).then(response=>{
            message.success(response.data.msg)
            this.setState({
                selectedRowKeys: [],
                loading: false
            })
            this.loadData()
        })
    }

    // 堡垒机策略按钮
    onEditSyncPolicyBtn = (rowData) => {
        http.get('/cloud/host').then(response=>{
            this.formRefEditSyncPolicy.current.setFieldsValue({
                instance_id: rowData.instance_id,
                jumpserver_status: rowData.jumpserver_status
            })
        }).catch()
        this.setState({
            visible_sync_policy: true,
        })
    }

    /** 堡垒机同步提交  */ 
    onFinishEditSyncPolicy = (data) => {
        const requestData = {
            instance_id: data.instance_id,
            jumpserver_status: data.jumpserver_status,
            operation_type: 'change_jumpserver_status',
            loading_sync_policy: true
        }
        http.patch('/cloud/host', {params: requestData}).then(response=>{
            message.success(response.data.msg)
            this.setState({
                loading_sync_policy: false,
                visible_sync_policy: false,
                selectedRowKeys: [],
            })
            this.loadData()
        })
    }

    // 堡垒机同步取消
    onFinishEditSyncPolicyCancel = (data) => {
        this.setState({
            visible_sync_policy: false,
            jumpserver_status: null
        })
    }

    // 添加资产按钮
    onAddHostBtn = () => {
        this.setState({
            visible_add: true
        })
    }

    /** 添加资产取消 */
    onFinishAddCancel = () => {
        this.setState({
            visible_add: false
        })
        this.formRefAdd.current.resetFields()
    }

    /** 添加资产提交 */
    onFinishAdd = (data) => {
        const requestData = {
            instance_id: data.instance_id,
            name: data.name,
            private_ip: data.private_ip,
            public_ip: data.public_ip,
            eip: data.eip,
            vpn_ip: data.vpn_ip,
            cpu: data.cpu,
            memory: data.memory,
            resource_type: data.resource_type,
            charge_type: data.charge_type,
            create_time: data.create_time,
            expire_time: data.expire_time,
            platform: data.platform,
            region: data.region,
            business: data.business,
            division: data.division,
            account_name: data.account_name,
            os_type: data.os_type
        }
        http.post('/cloud/host', requestData).then(response=>{
            message.success(response.data.msg)
            this.setState({
                visible_add: false,
            })
            this.formRefAdd.current.resetFields()
            this.loadData()
        }).catch()
    }

    onClose = () => {
        this.setState({
            visible_drawer: false,
        })
    }

    onChangeJumpServerStatus = (id) => {
        const requestData = {
            instance_id: id,
            operation_type: 'change_jumpserver_status',
        }
        http.patch('/cloud/host', {params: requestData}).then(response=>{})
    }

    onChangeAlarmStatus = (id) => {
        const requestData = {
            instance_id: id,
            operation_type: 'change_alarm_status',
        }
        http.patch('/cloud/host', {params: requestData}).then(response=>{})
    }

    // 单次维护按钮
    onAlarmMaintainSingleBtn = (rowData) => {
        const requestData = {
            resource_type: rowData.resource_type,
            platform: rowData.platform,
            instance_id: rowData.instance_id,
            operation_type: 'get_metric_list',
        }

        http.patch('/cloud/host/' + rowData.instance_id, {params: requestData}).then(response=>{
            const metric_list_select = []
            const resp_data = response.data.data
            const metric_list = resp_data.metric_list
            const metric_list_column = []
            metric_list_column.push({
                key:'metric',
                value: maintain_date,
                metric_key: null,
                metric_value: [],
            })

            for (let i = 0; i < metric_list.length; i++) {
                metric_list_select.push(<Option key={metric_list[i]}>{metric_list[i]}</Option>)
            }

            this.setState({
                metric_list_select: metric_list_select,
                metric_list_column: metric_list_column,
                metric_instance_id: rowData.instance_id,
                visable_maintain_single: true
            })
        })
    }

    // 维护按钮
    onAlarmMaintainBtn = (rowData) => {
        const requestData = {
            resource_type: rowData.resource_type,
            platform: rowData.platform,
            instance_id: rowData.instance_id,
            operation_type: 'get_metric_list',
        }

        http.patch('/cloud/host/' + rowData.instance_id, {params: requestData}).then(response=>{
            const metric_list_select = []
            const resp_data = response.data.data
            const metric_list = resp_data.metric_list
            const metric_current_list = resp_data.metric_current_list
            
            // 获取当前选中的数据
            const metric_list_column = []
            if (metric_current_list.length > 0) {
                for(let i = 0; i < metric_current_list.length; i++) {
                    metric_list_column.push({
                        key:'metric',
                        value: maintain_date,
                        metric_key: metric_current_list[i].metric_name,
                        metric_value: metric_current_list[i].maintain_time,
                    })
                }
            } else {
                metric_list_column.push({
                    key:'metric',
                    value: maintain_date,
                    metric_key: null,
                    metric_value: [],
                })
            }

            for (let i = 0; i < metric_list.length; i++) {
                metric_list_select.push(<Option key={metric_list[i]}>{metric_list[i]}</Option>)
            }
            this.setState({
                metric_list_select: metric_list_select,
                metric_list_column: metric_list_column,
                metric_instance_id: rowData.instance_id,
                visable_maintain: true
            })
        })
    }

    // 单次维护提交按钮
    onAlarmMaintainSingleFinishAdd = (data) => {
        const requestData = {
            operation_type: 'change_single_metric_list',
            data: data
        }
        http.patch('/cloud/host/' + this.state.metric_instance_id, {params: requestData}).then(response=>{
            this.setState({
                visable_maintain_single: false,
            })
            this.formRefMaintain.current.resetFields();
            message.success(response.data.msg)
        })
    }

    // 维护提交按钮
    onAlarmMaintainFinishAdd = (data) => {
        const requestData = {
            operation_type: 'change_metric_list',
            data: data
        }
        http.patch('/cloud/host/' + this.state.metric_instance_id, {params: requestData}).then(response=>{
            this.setState({
                visable_maintain: false,
            })
            this.formRefMaintain.current.resetFields();
            message.success(response.data.msg)
        })
    }
    
    // 维护按钮取消
    onAlarmMaintainCancelBtn = () => {
        this.setState({
            visable_maintain: false,
            visable_maintain_single: false,
            metric_list: [],
            metric_list_select: [],
            metric_instance_id: null,
            metric_list_column: [{
                key:'metric',
                value: maintain_date
            }],
        })
        this.formRefMaintain.current.resetFields();
    }

    // 维护列新增
    onAlarmMaintainAddColBtn = () => {
        this.state.metric_list_column.push({
            key:'metric',
            value: maintain_date
        })
        this.setState({
            metric_list_column: this.state.metric_list_column
        })
    }

    // 维护列删除
    onAlarmMaintainDelColBtn = () => {
        this.state.metric_list_column.pop()
        this.setState({
            metric_list_column: this.state.metric_list_column
        })
    }

    // 一键导出
    onexportExcelBtn = () => {
        // 不同云产品添加自定义字段
        const _cmdb_sheet_filter = cmdb_sheet_filter.concat('private_ip', 'publc_ip', 'eip', 'vpn_ip', 'cpu', 'memory', 'instance_type', 'os')
        const _cmdb_sheet_header = cmdb_sheet_header.concat('内网地址', '公网地址', '弹性地址', 'VPN地址', 'CPU', '内存', '规格', '系统版本')

        let option = {}
        option.fileName = cmdb_sheet_name
        option.datas = [
            {
                sheetData: this.state.dataSource,
                sheetName: cmdb_sheet_name,
                sheetFilter: _cmdb_sheet_filter,
                sheetHeader: _cmdb_sheet_header
            }
        ]
        var toExcel = new ExportJsonExcel(option)
        toExcel.saveExcel()
    }

    render(){
        const { loading, columns, dataSource, page, total, search_option_platform, search_option_account, search_option_region, selectedRowKeys, visible_ansible, visible_add,
                ansible_list_option, loading_ansible, loading_label, socket_ansible_info, visible_drawer, visable_label, visable_label_division, label_list_option, label_list_option_name,
                label_division_list_option, label_division_list_option_name, dataSourceCms, visable_cms, visible_edit, visable_maintain, visable_maintain_single, metric_list_select, 
                metric_list_column, maintain_key, visible_sync, visible_sync_policy, loading_sync_policy, visable_label_waterline, label_waterline_list_option, label_waterline_list_option_name
        } = this.state
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        }

        const content = (
            <div>
                <Link target="_blank" href="https://gykj.yuque.com/qhagw5/kml348/evsgoz">
                    堡垒机同步策略
                </Link>
            </div>
          );

        const operations = (
            <Menu
                items={[
                    {
                        label: (
                            <Action.Button onClick={() => this.onLabelBtn()}>业务线标签</Action.Button>
                        ),
                        key: '0',
                    },
                    {
                        label: (
                            <Action.Button onClick={() => this.onLabelDivisionBtn()}>事业部标签</Action.Button>
                        ),
                        key: '1',
                    },
                    {
                        label: (
                            <Action.Button onClick={() => this.onLabelWaterlineBtn()}>水位线标签</Action.Button>
                        ),
                        key: '2',
                    },
                    {
                        label: (
                            <Action.Button onClick={() => this.onSyncHostBtn()} >同步资产</Action.Button>
                        ),
                        key: '3',
                    },
                    {
                        label: (
                            <Action.Button onClick={() => this.onAddHostBtn()} >添加资产</Action.Button>
                        ),
                        key: '4',
                    },
                    {
                        label: (
                            <Action.Button onClick={() => this.onRunAnsibleTaskBtn()} >执行Ansible任务</Action.Button>
                        ),
                        key: '5',
                    },
                    {
                        label: (
                            <Action.Button onClick={() => this.onexportExcelBtn()} >导出页面数据</Action.Button>
                        ),
                        key: '6',
                    },
                ]}
            />
        );
 
        var myStyle = {margin: '20px'}
        var myStyle1 = {margin: '10px', float: 'right'}
        var myStyle3 = {margin: '15px'}
        var myStyle4 = {margin: '15px'}
        var myStyleForm = {marginRight: '10px', marginTop: '5px'}

        return (
            <Fragment>
                <Form layout="inline" onFinish={this.onFinishSearch} size="small">
                    <Form.Item label="搜索内容" name="search_common" style={myStyleForm}>
                        <Input placeholder="实例ID/名称/IP"  />
                    </Form.Item>

                    <Form.Item label="云平台" name="platform" size="small" style={myStyleForm}>
                        <Select
                            allowClear
                            showSearch
                            style={{ width: 180 }}
                            placeholder="请选择区域"
                            optionFilterProp="children"
                            onChange={this.onChangePlatform}
                            filterOption={(input, option) =>
                                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                        >
                            {search_option_platform}
                        </Select>
                    </Form.Item>

                    <Form.Item label="云账户" name="account_name" size="small" style={myStyleForm}>
                        <Select
                            allowClear
                            showSearch
                            style={{ width: 180 }}
                            placeholder="请选择云账户"
                            onChange={this.onChangeAccountName}
                            >
                            {search_option_account}
                        </Select>                      
                    </Form.Item>

                    <Form.Item label="区域" name="region" size="small" style={myStyleForm}>
                        <Select
                            allowClear
                            showSearch
                            style={{ width: 180 }}
                            placeholder="请选择区域"
                            optionFilterProp="children"
                            onChange={this.onChangeRegion}
                            filterOption={(input, option) =>
                            option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                        >
                            {search_option_region}
                        </Select>
                    </Form.Item>

                    <Form.Item label="业务线搜索" name="search_business" size="small" style={myStyleForm}>
                        <Select
                            allowClear
                            showSearch
                            style={{ width: 180 }}
                            placeholder="请选择业务线"
                            optionFilterProp="children"
                            onChange={this.onChangeBusiness}
                            filterOption={(input, option) =>
                            option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                        >
                            {label_list_option_name}
                        </Select>
                    </Form.Item>

                    <Form.Item label="事业部搜索" name="search_division" size="small" style={myStyleForm}>
                        <Select
                            allowClear
                            showSearch
                            style={{ width: 180 }}
                            placeholder="请选择事业部"
                            optionFilterProp="children"
                            onChange={this.onChangeDivision}
                            filterOption={(input, option) =>
                            option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                        >
                            {label_division_list_option_name}
                        </Select>
                    </Form.Item>

                    <Form.Item label="水位线搜索" name="search_waterline" size="small" style={myStyleForm}>
                        <Select
                            allowClear
                            showSearch
                            style={{ width: 180 }}
                            placeholder="请选择水位线"
                            optionFilterProp="children"
                            onChange={this.onChangeWaterline}
                            filterOption={(input, option) =>
                            option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                        >
                            {label_waterline_list_option_name}
                        </Select>
                    </Form.Item>

                    <Form.Item label="资源类型" name="resource_type" size="small" style={myStyleForm}>
                        <Select
                            allowClear
                            showSearch
                            style={{ width: 180 }}
                            placeholder="请选择资源类型"
                            >
                            <Option key="host">云服务器</Option>
                            <Option key="slb">负载均衡</Option>
                            <Option key="kubernetes">容器集群</Option>
                            <Option key="waf">Web应用防火墙</Option>
                            <Option key="bastion">云堡垒机</Option>
                            <Option key="sas">云安全中心</Option>
                            <Option key="cloud-market">云市场</Option>
                            <Option key="ecd">无影云电脑</Option>
                            <Option key="sls">SLS日志</Option>
                            <Option key="ssl">SSL证书</Option>
                            <Option key="cdn">CDN内容分发</Option>
                            <Option key="imm">IMM智能媒体管理</Option>
                            <Option key="ddos">DDOS高防</Option>
                            <Option key="online-reasoning">在线推理</Option>
                            <Option key="model-customization-jobs">模型精调</Option>
                            <Option key="win-pdd">拼多多Windows</Option>
                            <Option key="slb-fz">拼多多负载均衡</Option>
                            <Option key="logm-pdd">拼多多日志机</Option>
                            <Option key="nat-pdd">拼多多网关</Option>
                        </Select>                      
                    </Form.Item>

                    <Form.Item label="接警状态" name="alarm_status" size="small" style={myStyleForm}>
                        <Select
                            allowClear
                            showSearch
                            style={{ width: 200 }}
                            placeholder="查询接警状态"
                            >
                            <Option key={false}>禁用</Option>
                        </Select>                      
                    </Form.Item>

                    <Form.Item label="堡垒机状态" name="jumpserver_status" size="small" style={myStyleForm}>
                        <Select
                            allowClear
                            showSearch
                            style={{ width: 200 }}
                            placeholder="查询堡垒机状态"
                            >
                            <Option key='1'>内网</Option>
                            <Option key='0'>公网</Option>
                            <Option key='2'>禁用</Option>
                        </Select>                      
                    </Form.Item>

                    <Form.Item label="付费类型" name="charge_type" size="small" style={myStyleForm}>
                        <Select
                            allowClear
                            showSearch
                            style={{ width: 200 }}
                            placeholder="查询付费类型"
                            >
                            <Option key="包年包月">包年包月</Option>
                            <Option key="按量付费">按量付费</Option>
                        </Select>                      
                    </Form.Item>

                    <Form.Item shouldUpdate={true} size="small" style={myStyleForm}>
                        <Button type="primary" htmlType="submit">搜索</Button>
                    </Form.Item>
                </Form>

                <div style={myStyle1}>
                    <Popover content={content} >
                        <img src="https://yunwei-public.oss-cn-zhangjiakou.aliyuncs.com/ops/common/help.png" alt="logo" style={{ height: '16px'}}/>
                    </Popover>
                </div>
                
                <div style={myStyle1}></div>

                <div style={myStyle1}>
                    <Dropdown overlay={operations}>
                        <Action.Button>
                            <Space>
                                更多操作
                                <DownOutlined />
                            </Space>
                        </Action.Button>
                    </Dropdown>
                </div>

                <Table
                    size="small"
                    pagination={false} 
                    rowSelection={rowSelection} 
                    rowKey="id" 
                    columns={columns} 
                    dataSource={dataSource}
                    loading={loading}
                    scroll={{ y: 600, x: 2000 }}
                >
                </Table>

                <div style={myStyle}>
                    <Col span={16}>
                        <Pagination
                            onChange={this.onChangeSizePage}
                            current={page}
                            total={total}
                            pageSizeOptions={pagination_size_option}
                            showSizeChanger
                            showQuickJumper
                            showTotal={total => `Total ${total} items`}
                        />
                    </Col>
                </div>

                <Modal
                    title="进程监控"
                    visible={visable_cms}
                    onCancel={this.onFinishCmsCancel}
                    okText="确认"
                    cancelText="取消"
                    footer={null}
                    width={1300}
                >
                    <div style={{ height: '60',  overflowY: 'auto' }}>
                    <Table dataSource={dataSourceCms} columns={columnsCms} />;

                    </div>
                </Modal>

                <Modal
                    title="告警指标一次性维护"
                    visible={visable_maintain_single}
                    onCancel={this.onAlarmMaintainCancelBtn}
                    okText="确认"
                    cancelText="取消"
                    footer={null}
                    width={1300}
                >
                    <div style={myStyle3}>
                        <Button onClick={this.onAlarmMaintainAddColBtn}>新增</Button>
                        <Button onClick={this.onAlarmMaintainDelColBtn}>删除</Button>
                        （如果选中了多个相同的指标，则最下层的指标维护规则生效）
                    </div>

                    <div style={myStyle4}>
                        <Form
                            onFinish={this.onAlarmMaintainSingleFinishAdd}
                            ref={this.formRefMaintain}
                            labelCol={{ span: 5 }}
                            wrapperCol={{ span: 14 }}
                        >
                            {
                                metric_list_column.map((item, index)=>(
                                    <Space size={[8, 16]} wrap>
                                        <Form.Item 
                                            name={item.key + '-key-' + index}
                                            rules={[{required: true}]}
                                            initialValue={item.metric_key}
                                        >
                                            <Select
                                                allowClear
                                                showSearch
                                                style={{ width: 400 }}
                                                placeholder="请选择度量指标"
                                                optionFilterProp="children"
                                                filterOption={(input, option) =>
                                                    option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            >
                                                {metric_list_select}
                                            </Select>
                                        </Form.Item>

                                        <Form.Item
                                            name={item.key + '-value-' + index}
                                            rules={[{required: true}]}
                                            initialValue={item.metric_value}
                                        >
                                            <InputNumber min={1} max={43200} value={1} placeholder="请输入单次维护的时间（单位：分钟）" style={{ width: '400px' }}/>
                                        </Form.Item>
                                    </Space>
                                ))
                            }
                            <Form.Item>
                                <Button loading={false} htmlType="submit" type="primary">确定</Button>
                            </Form.Item>  
                        </Form>
                    </div>
                </Modal>
                
                <Modal
                    title="告警指标维护周期"
                    visible={visable_maintain}
                    onCancel={this.onAlarmMaintainCancelBtn}
                    okText="确认"
                    cancelText="取消"
                    footer={null}
                    width={1300}
                >
                    <div style={myStyle3}>
                        <Button onClick={this.onAlarmMaintainAddColBtn}>新增</Button>
                        <Button onClick={this.onAlarmMaintainDelColBtn}>删除</Button>
                        （如果选中了多个相同的指标，则最上层的指标维护规则生效）
                    </div>

                    <div style={myStyle4}>
                        <Form
                            onFinish={this.onAlarmMaintainFinishAdd}
                            ref={this.formRefMaintain}
                            labelCol={{ span: 5 }}
                            wrapperCol={{ span: 14 }}
                        >
                            {
                                metric_list_column.map((item, index)=>(
                                    <Space size={[8, 16]} wrap>
                                        <Form.Item 
                                            name={item.key + '-key-' + index}
                                            rules={[{required: true}]}
                                            initialValue={item.metric_key}
                                        >
                                            <Select
                                                allowClear
                                                showSearch
                                                style={{ width: 400 }}
                                                placeholder="请选择度量指标"
                                                optionFilterProp="children"
                                                filterOption={(input, option) =>
                                                    option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                                                }
                                            >
                                                {metric_list_select}
                                            </Select>
                                        </Form.Item>

                                        <Form.Item
                                            name={item.key + '-value-' + index}
                                            rules={[{required: true}]}
                                            initialValue={item.metric_value}
                                        >
                                            <Select
                                                mode="multiple"
                                                allowClear
                                                showSearch
                                                style={{ width: 400 }}
                                                placeholder="请选择维护时间段"
                                                optionFilterProp="children"
                                                dropdownRender={menu=>(
                                                    <div>
                                                        {menu}
                                                        <Divider style={{margin:'1px 1px'}}/>
                                                        <div style={{margin: "10px 10px"}}>
                                                            <Checkbox  onChange={(e) => {e.target.checked && this.formRefMaintain.current.setFieldsValue({ [item.key + '-value-' + index] : maintain_key} ) }} >全选</Checkbox>
                                                        </div>
                                                    </div>
                                                )}
                                            >
                                                {
                                                    item.value.map(el=>(
                                                        <Option value={el.key}>{el.value}</Option>
                                                    ))
                                                }
                                            </Select>
                                        </Form.Item>
                                    </Space>
                                ))
                            }
                            <Form.Item>
                                <Button loading={false} htmlType="submit" type="primary">确定</Button>
                            </Form.Item>  
                        </Form>
                    </div>
                </Modal>

                <Modal
                    title="执行Ansible任务"
                    visible={visible_ansible}
                    onCancel={this.onFinishAnsibleCancel}
                    okText="确认"
                    cancelText="取消"
                    footer={null}
                    width="800px"
                >
                    <Form
                        onFinish={this.onFinishAnsible}
                        ref={this.formRefAnsible}
                        labelCol={{ span: 5 }}
                        wrapperCol={{ span: 14 }}
                    >

                        <Form.Item label="主机列表" name="ansible_host_list">
                            <TextArea disabled autoSize={true}></TextArea>
                        </Form.Item>

                        <Form.Item label="任务列表" name="ansible_task_list">
                        <Select
                            allowClear
                            showSearch
                            style={{ width: 200 }}
                            placeholder="请选择执行任务"
                            optionFilterProp="children"
                            mode="multiple"
                            filterOption={(input, option) =>
                                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                        >
                            {ansible_list_option}
                        </Select>
                    </Form.Item>

                        <Form.Item>
                            <Button loading={loading_ansible} htmlType="submit" type="primary">确定</Button>
                        </Form.Item>                                                               
                    </Form>           
                </Modal>

                <Modal
                    title="批量打标签"
                    visible={visable_label}
                    onCancel={this.onFinishLabelCancel}
                    okText="确认"
                    cancelText="取消"
                    footer={null}
                    width="800px"
                >
                    <Form
                        onFinish={this.onFinishLabel}
                        ref={this.formRefLabel}
                        labelCol={{ span: 5 }}
                        wrapperCol={{ span: 14 }}
                    >

                        <Form.Item label="主机列表" name="label_host_list">
                            <TextArea disabled autoSize={true}></TextArea>
                        </Form.Item>

                        <Form.Item label="业务列表" name="business_id">
                        <Select
                            allowClear
                            showSearch
                            style={{ width: 200 }}
                            placeholder="请选择业务线"
                            optionFilterProp="children"
                            filterOption={(input, option) =>
                                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                        >
                            {label_list_option}
                        </Select>
                    </Form.Item>

                        <Form.Item>
                            <Button loading={loading_label} htmlType="submit" type="primary">确定</Button>
                        </Form.Item>                                                               
                    </Form>           
                </Modal>

                <Modal
                    title="批量打标签"
                    visible={visable_label_division}
                    onCancel={this.onFinishLabelDivisionCancel}
                    okText="确认"
                    cancelText="取消"
                    footer={null}
                    width="800px"
                >
                    <Form
                        onFinish={this.onFinishLabelDivision}
                        ref={this.formRefLabelDivision}
                        labelCol={{ span: 5 }}
                        wrapperCol={{ span: 14 }}
                    >

                        <Form.Item label="主机列表" name="label_host_list">
                            <TextArea disabled autoSize={true}></TextArea>
                        </Form.Item>

                        <Form.Item label="事业部列表" name="division_id">
                        <Select
                            allowClear
                            showSearch
                            style={{ width: 200 }}
                            placeholder="请选择事业部"
                            optionFilterProp="children"
                            filterOption={(input, option) =>
                                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            }
                        >
                            {label_division_list_option}
                        </Select>
                    </Form.Item>

                        <Form.Item>
                            <Button loading={loading_label} htmlType="submit" type="primary">确定</Button>
                        </Form.Item>                                                               
                    </Form>           
                </Modal>

                <Modal
                    title="批量打标签"
                    visible={visable_label_waterline}
                    onCancel={this.onFinishLabelWaterlineCancel}
                    okText="确认"
                    cancelText="取消"
                    footer={null}
                    width="800px"
                >
                    <Form
                        onFinish={this.onFinishLabelWaterline}
                        ref={this.formRefLabelWaterline}
                        labelCol={{ span: 5 }}
                        wrapperCol={{ span: 14 }}
                    >

                        <Form.Item label="主机列表" name="label_host_list">
                            <TextArea disabled autoSize={true}></TextArea>
                        </Form.Item>

                        <Form.Item label="水位线列表" name="waterline_id">
                        <Select
                            allowClear
                            showSearch
                            style={{ width: 439 }}
                            placeholder="请选择水位线"
                            optionFilterProp="children"
                            // filterOption={(input, option) =>
                            //     option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                            // }
                        >
                            {label_waterline_list_option}
                        </Select>
                    </Form.Item>

                        <Form.Item>
                            <Button loading={loading_label} htmlType="submit" type="primary">确定</Button>
                        </Form.Item>                                                               
                    </Form>           
                </Modal>

                <Modal
                    title="添加云资源"
                    visible={visible_add}
                    onCancel={this.onFinishAddCancel}
                    okText="确认"
                    cancelText="取消"
                    footer={null}
                    width="700px"
                >
                    <Form
                        onFinish={this.onFinishAdd}
                        ref={this.formRefAdd}
                        labelCol={{ span: 5 }}
                        wrapperCol={{ span: 14 }}
                    >
                        <Form.Item label="实例ID" name="instance_id" rules={[{ required: true}]}>
                            <Input></Input>
                        </Form.Item>

                        <Form.Item label="实例名称" name="name" rules={[{ required: true}]}>
                            <Input></Input>
                        </Form.Item>

                        <Form.Item label="私网地址" name="private_ip" rules={[{ required: true}]}>
                            <Input></Input>
                        </Form.Item>

                        <Form.Item label="公网地址" name="public_ip">
                            <Input></Input>
                        </Form.Item>

                        <Form.Item label="弹性地址" name="eip">
                            <Input></Input>
                        </Form.Item>

                        <Form.Item label="VPN地址" name="vpn_ip">
                            <Input></Input>
                        </Form.Item>

                        <Form.Item label="CPU (核)" name="cpu">
                            <Input placeholder="1/2/4/8"></Input>
                        </Form.Item>

                        <Form.Item label="内存 (MB)" name="memory">
                            <Input placeholder="1024/2048/4096"></Input>
                        </Form.Item>

                        <Form.Item label="系统类型" name="os_type" rules={[{ required: true}]}>
                            <Select
                                allowClear
                                showSearch
                                style={{ width: '100%' }}
                                placeholder="选择付费类型"
                            >
                                <Option key='linux'>Linux</Option>
                                <Option key='windows'>windows</Option>
                            </Select>
                        </Form.Item>

                        <Form.Item label="资源类型" name="resource_type" rules={[{ required: true}]}>
                            <Select
                                allowClear
                                showSearch
                                style={{ width: '100%' }}
                                placeholder="选择付费类型"
                            >
                                <Option key='host'>云主机</Option>
                                <Option key='bastion'>云堡垒机</Option>
                                {/* <Option key='slb'>负载均衡</Option>
                                <Option key='kubernetes'>容器集群</Option>
                                <Option key='waf'>Web应用防火墙</Option>
                                <Option key='ssl'>SSL证书</Option>
                                <Option key='sas'>云安全中心</Option> */}
                            </Select>
                        </Form.Item>                        

                        <Form.Item label="付费类型" name="charge_type" rules={[{ required: true}]}>
                            <Select
                                allowClear
                                showSearch
                                style={{ width: '100%' }}
                                placeholder="选择付费类型"
                            >
                                <Option key='包年包月'>包年包月</Option>
                                <Option key='按量付费'>按量付费</Option>
                            </Select>
                        </Form.Item>

                        <Form.Item label="创建时间" name="create_time">
                            <Input placeholder="按量留空, 包年包月格式: yy-mm-dd HH:MM:SS (2022-01-30 23:59:59)"></Input>
                        </Form.Item>

                        <Form.Item label="过期时间" name="expire_time">
                            <Input placeholder="按量留空, 包年包月格式: yy-mm-dd HH:MM:SS (2022-01-30 23:59:59)"></Input>
                        </Form.Item>

                        <Form.Item label="云平台名称" name="platform" rules={[{ required: true}]}>
                            <Select
                                allowClear
                                showSearch
                                style={{ width: '100%' }}
                                placeholder="选择云平台"
                                onChange={this.onChangePlatform}
                                >
                                {search_option_platform}
                            </Select>
                        </Form.Item>

                        <Form.Item label="云账户名称" name="account_name" rules={[{ required: true}]}>
                            <Select
                                allowClear
                                showSearch
                                style={{ width: '100%' }}
                                placeholder="选择云账户"
                                >
                                {search_option_account}
                            </Select>
                        </Form.Item>

                        <Form.Item label="云区域名称" name="region" rules={[{ required: true}]}>
                            <Select
                                allowClear
                                showSearch
                                style={{ width: '100%' }}
                                placeholder="选择云区域"
                                >
                                {search_option_region}
                            </Select>
                        </Form.Item>

                        <Form.Item label="业务线标签" name="business" rules={[{ required: true}]}>
                            <Select
                                allowClear
                                showSearch
                                style={{ width: '100%' }}
                                placeholder="选择业务线"
                                >
                                {label_list_option_name}
                            </Select>
                        </Form.Item>

                        <Form.Item label="事业部标签" name="division" rules={[{ required: true}]}>
                            <Select
                                allowClear
                                showSearch
                                style={{ width: '100%' }}
                                placeholder="选择事业部"
                                >
                                {label_division_list_option_name}
                            </Select>
                        </Form.Item>

                        <Form.Item>
                            <Button htmlType="submit" type="primary">确定</Button>
                        </Form.Item>                                                               
                    </Form>           
                </Modal>

                <Modal
                    title="编辑资产信息"
                    visible={visible_edit}
                    onCancel={this.onFinishEditCancel}
                    okText="确认"
                    cancelText="取消"
                    footer={null}
                >
                    <Form
                        onFinish={this.onFinishEdit}
                        ref={this.formRefEdit}
                        labelCol={{ span: 5 }}
                        wrapperCol={{ span: 14 }}
                    >
                        <Form.Item label="实例ID" name="instance_id" rules={[{ required: true}]}>
                            <Input disabled></Input>
                        </Form.Item>

                        <Form.Item label="实例名称" name="name" rules={[{ required: true}]}>
                            <Input></Input>
                        </Form.Item>

                        <Form.Item label="私网地址" name="private_ip" rules={[{ required: true}]}>
                            <Input></Input>
                        </Form.Item>

                        <Form.Item label="公网地址" name="public_ip">
                            <Input></Input>
                        </Form.Item>

                        <Form.Item label="弹性地址" name="eip">
                            <Input></Input>
                        </Form.Item>

                        <Form.Item label="VPN地址" name="vpn_ip">
                            <Input></Input>
                        </Form.Item>

                        <Form.Item label="CPU (核)" name="cpu">
                            <Input placeholder="1/2/4/8"></Input>
                        </Form.Item>

                        <Form.Item label="内存 (MB)" name="memory">
                            <Input placeholder="1024/2048/4096"></Input>
                        </Form.Item>

                        <Form.Item label="系统类型" name="os_type" rules={[{ required: true}]}>
                            <Select
                                allowClear
                                showSearch
                                style={{ width: '100%' }}
                                placeholder="选择资源类型"
                            >
                                <Option key='linux'>Linux</Option>
                                <Option key='windows'>Windows</Option>
                            </Select>
                        </Form.Item>  

                        <Form.Item label="资源类型" name="resource_type" rules={[{ required: true}]}>
                            <Select
                                allowClear
                                showSearch
                                style={{ width: '100%' }}
                                placeholder="选择资源类型"
                            >
                                <Option key='host'>云主机</Option>
                            </Select>
                        </Form.Item>  

                        <Form.Item label="付费类型" name="charge_type" rules={[{ required: true}]}>
                            <Select
                                allowClear
                                showSearch
                                style={{ width: '100%' }}
                                placeholder="选择付费类型"
                            >
                                <Option key='包年包月'>包年包月</Option>
                                <Option key='按量付费'>按量付费</Option>
                            </Select>
                        </Form.Item>

                        <Form.Item label="创建时间" name="create_time">
                            <Input placeholder="按量留空, 包年包月格式: yy-mm-dd HH:MM:SS (2022-01-30 23:59:59)"></Input>
                        </Form.Item>

                        <Form.Item label="过期时间" name="expire_time">
                            <Input placeholder="按量留空, 包年包月格式: yy-mm-dd HH:MM:SS (2022-01-30 23:59:59)"></Input>
                        </Form.Item>

                        <Form.Item label="云平台名称" name="platform" rules={[{ required: true}]}>
                            <Select
                                allowClear
                                showSearch
                                style={{ width: '100%' }}
                                placeholder="选择云平台"
                                onChange={this.onChangePlatform}
                                >
                                {search_option_platform}
                            </Select>
                        </Form.Item>

                        <Form.Item label="云账户名称" name="account_name" rules={[{ required: true}]}>
                            <Select
                                allowClear
                                showSearch
                                style={{ width: '100%' }}
                                placeholder="选择云账户"
                                >
                                {search_option_account}
                            </Select>
                        </Form.Item>

                        <Form.Item label="云区域名称" name="region" rules={[{ required: true}]}>
                            <Select
                                allowClear
                                showSearch
                                style={{ width: '100%' }}
                                placeholder="选择云区域"
                                >
                                {search_option_region}
                            </Select>
                        </Form.Item>

                        <Form.Item label="业务线标签" name="business" rules={[{ required: true}]}>
                            <Select
                                allowClear
                                showSearch
                                style={{ width: '100%' }}
                                placeholder="选择业务线"
                                >
                                {label_list_option_name}
                            </Select>
                        </Form.Item>

                        <Form.Item label="事业部标签" name="division" rules={[{ required: true}]}>
                            <Select
                                allowClear
                                showSearch
                                style={{ width: '100%' }}
                                placeholder="选择事业部"
                                >
                                {label_division_list_option_name}
                            </Select>
                        </Form.Item>

                        <Form.Item>
                            <Button htmlType="submit" type="primary">确定</Button>
                        </Form.Item>                                                                 
                    </Form>           
                </Modal>

                <Modal
                    title="编辑同步策略"
                    visible={visible_sync_policy}
                    onCancel={this.onFinishEditSyncPolicyCancel}
                    okText="确认"
                    cancelText="取消"
                    footer={null}
                >
                    <Form
                        onFinish={this.onFinishEditSyncPolicy}
                        ref={this.formRefEditSyncPolicy}
                        labelCol={{ span: 5 }}
                        wrapperCol={{ span: 14 }}
                    >
                        <Form.Item label="实例ID" name="instance_id" rules={[{ required: true}]}>
                            <Input disabled></Input>
                        </Form.Item>

                        <Form.Item label="同步策略" name="jumpserver_status" rules={[{ required: true}]}>
                            <Select
                                allowClear
                                showSearch
                                style={{ width: '100%' }}
                                placeholder="选择策略类型"
                            >
                                <Option key='1'>内网</Option>
                                <Option key='0'>公网</Option>
                                <Option key='2'>禁用</Option>
                            </Select>
                        </Form.Item>

                        <Form.Item>
                            <Button loading={loading_sync_policy} htmlType="submit" type="primary">确定</Button>
                        </Form.Item>                                                            
                    </Form>           
                </Modal>

                <Modal
                    title="同步资产"
                    visible={visible_sync}
                    onOk={this.onFinishSyncHost}
                    onCancel={() => {this.setState({visible_sync: false, selectedRowKeys: []})}}
                    okText="确认"
                    cancelText="取消"
                >
                    <p>确定同步新增的资产到堡垒机?</p>
                </Modal>

                <Drawer title="任务执行结果" 
                    placement="right" 
                    onClose={this.onClose} 
                    visible={visible_drawer}
                    width={1000}>
                    <span>{socket_ansible_info}</span>
                </Drawer>
            </Fragment>
        )
    }
}

export default Host;